import React from "react";
// import "./ex.less";
import style from "./aa.module.css";
import styleb from "./bb.module.less";
console.log(style);
console.log(styleb);

export default function CSSInJS() {
  return (
    <div>
      {/* 在a页面使用了一个 left class */}

      {/* 可能在b页面也使用 left class */}
      <div className="login"></div>
      {/* 此时会造成多个页面的样式冲突， 有一个专门 解决方案 ： CSS in JS */}
      {/* 把css 作为 js的 模块导入 */}
      {/* import style from 'xxx.module.css' */}
      {/* 然后在使用 样式的时候 ， 通过 style.xxx 来起类名 */}
      <div className={style.login}></div>
      <div className={style["login-left"]}></div>
    </div>
  );
}
